<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>

</head>
<body>

<div id="list"></div>
<div id="demo"></div>
<script src="../layui/layui.js"></script>
<script>

    layui.use(['laypage','jquery'],function () {

        var laypage = layui.laypage
            $ = layui.jquery;

        var data = [
            '北京',
            '上海',
            '广州',
            '深圳',
            '杭州',
            '长沙',
            '合肥',
            '宁夏',
            '成都',
            '西安',
            '南昌',
            '上饶',
            '沈阳',
            '济南',
            '厦门',
            '福州',
            '九江',
            '宜春',
            '赣州',
            '宁波',
            '绍兴',
            '无锡',
            '苏州',
            '徐州',
            '东莞',
            '佛山',
            '中山',
            '成都',
            '武汉',
            '青岛',
            '天津',
            '重庆',
            '南京',
            '九江',
            '香港',
            '澳门',
            '台北'
        ];

        //调用分页
        laypage.render({
            elem: 'demo'
            ,count: data.length
            ,jump: function(obj){
                //模拟渲染,用jquery实现
                $("#list").html(function () {
                    var arr = []
                        ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);

                    $.each(thisData,function (index,item) {
                        arr.push('<li>'+ item +'</li>');
                    })
                    return arr.join('');
                })
            }
        });
    });
</script>
</body>
</html>